﻿
@{
    Layout = null;
    ViewBag.Title = "臻盈LeGo-注册页";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>臻盈LeGo-注册页面</title>
    <link href="~/Content/css/Content.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="center">
            @*<%-- 头部 --%>*@
            <div id="logo">
                <ul>
                    <li>
                        <img src="~/Content/Images/logo.jpg" alt="臻盈LeGo" />
                    </li>
                </ul>
            </div>
            @*<%-- 主体内容 --%>*@
            <div class="content">
                <div class="row">
                    <div class="row-left">
                        <h1>欢迎注册</h1>
                        <h4>加入臻盈LeGo，和我们一起开始不一样的体验吧！</h4>
                    </div>
                    <div class="row-rights">
                        <table>
                            <tr>
                                <td>
                                    <input id="Name" type="text" name="UsersName" required="required" placeholder="用户姓名" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="NickName" type="text" name="UsersNickName" required="required" placeholder="用户昵称" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="Account" type="text" name="UsersAccount" required="required" placeholder="登录账号" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="Password" type="password" name="UsersPassword" required="required" placeholder="登录密码" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="confirm-Password" type="password" name="confirm-UsersPassword" required="required" placeholder="确认密码" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="Phone" type="text" name="UsersPhone" required="required" placeholder="手机号码" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="Email" type="text" name="UsersEmail" required="required" placeholder="邮箱" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="Delivery" type="text" name="UsersDelivery" required="required" placeholder="收货地址" />
                                </td>
                            </tr>
                            <tr>
                                <td><input type="submit" id="btnRegister" name="submit" value="注册" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <small>已有账号？</small>
                                    <a id="denglu" href="~/Home/Login">登录</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <span name="msg"></span>
            <script>
                function query(name) {
                    return document.querySelector(`[name='${name}']`)
                };
                console.log(query('UsersPassword'));

                let inputs = document.querySelectorAll("[name='UsersPassword'],[name='confirm-UsersPassword']");
                [...inputs].map(item => {
                    item.addEventListener("keyup", function () {
                        let msg = '';
                        if (query('UsersPassword').value !== query("confirm-UsersPassword").value || query('UsersPassword').value.length < 5) {
                            msg = '两次密码不一致 或密码长度小于5位'
                        }
                        query('msg').innerHTML = msg;
                    });
                });

            </script>
            @*<%-- 底部 --%>*@
            <div class="copy">
                <p>&copy; @DateTime.Now.Year ZYLeGo official website 湘ICP备 1531546号</p>
            </div>
        </div>
    </form>
</body>
</html>
